<template>
  <div class="manual-page">
    <!-- 移动端菜单按钮 -->
    <div class="mobile-menu-btn" @click="toggleMobileMenu">
      <van-icon name="wap-nav" />
      <span>菜单</span>
    </div>
    
    <!-- 遮罩层 -->
    <div v-if="showMobileMenu" class="mobile-overlay" @click="closeMobileMenu"></div>
    
    <div class="sidebar" :class="{ 'sidebar-open': showMobileMenu }">
      <div class="sidebar-header">
        <div class="header-top">
          <button class="back-btn" @click="goBack">
            <van-icon name="arrow-left" />
            <span>返回</span>
          </button>
        </div>
        <!-- <h3 class="manual-title">{{ manualConfig.title }}</h3> -->
        <button class="collapse-btn" @click="toggleSidebar">
          <van-icon :name="sidebarCollapsed ? 'arrow-right' : 'arrow-left'" />
        </button>
      </div>
      
      <div class="search-section">
        <van-search
          v-model="searchQuery"
          placeholder="搜索手册内容..."
          @search="onSearch"
          @clear="onClearSearch"
        />
      </div>
      
      <div class="navigation-menu">
        <!-- <div class="nav-list">
          <div 
            v-for="(section, index) in manualSections" 
            :key="section.id || index"
            class="nav-item"
            :class="{ active: activeSection === section.id }"
            @click="goToSection(section.id)"
          >
            <div class="nav-item-content">
              <van-icon :name="section.icon || 'description'" class="nav-icon" />
              <div class="nav-text">
                <div class="nav-title">{{ section.title || section.id || 'Untitled' }}</div>
                <div class="nav-time" v-if="section.estimatedTime">{{ section.estimatedTime }}</div>
              </div>
            </div>
          </div>
        </div> -->
      </div>
    </div>
    
    <div class="main-content">
      <!-- <div class="content-header">
        <div class="breadcrumb">
          <van-breadcrumb separator="/">
            <van-breadcrumb-item>手册</van-breadcrumb-item>
            <van-breadcrumb-item v-if="currentSection">
              {{ currentSection.title }}
            </van-breadcrumb-item>
          </van-breadcrumb>
        </div>
      </div> -->

      <div class="content-body">
        <div class="section-content">
          <!-- <ManualRenderer 
            v-if="currentSection" 
            :section="currentSection"
            :language="currentLang"
          /> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
// import ManualRenderer from '../../components/manual/ManualRenderer.vue'
// import { enManualData } from '../../data/manual/en-manual-data.js'
import { getStoredLanguage } from '../../utils/language'

const route = useRoute()
const router = useRouter()

const sidebarCollapsed = ref(false)
const searchQuery = ref('')
const activeSection = ref('')
const currentLang = ref(route.query.lang || getStoredLanguage())
const showMobileMenu = ref(false)

// const manualConfig = computed(() => enManualData.config)
// const manualSections = computed(() => enManualData.sections)
// const currentSection = computed(() => {
//   return findSectionById(activeSection.value) || manualSections.value[0]
// })

// const findSectionById = (id) => {
//   for (const section of manualSections.value) {
//     if (section.id === id) return section
//     if (section.subsections) {
//       for (const subsection of section.subsections) {
//         if (subsection.id === id) return subsection
//         if (subsection.subsections) {
//           const found = subsection.subsections.find(s => s.id === id)
//           if (found) return found
//         }
//       }
//     }
//   }
//   return null
// }

const toggleSidebar = () => {
  sidebarCollapsed.value = !sidebarCollapsed.value
}

const goToSection = (sectionId) => {
  activeSection.value = sectionId
  // 移动端选择章节后关闭菜单
  showMobileMenu.value = false
}

const toggleMobileMenu = () => {
  showMobileMenu.value = !showMobileMenu.value
}

const closeMobileMenu = () => {
  showMobileMenu.value = false
}

const goBack = () => {
  router.push({
    path: '/service',
    query: { lang: currentLang.value }
  })
}

const onSearch = () => {
  // 搜索功能实现
}

const onClearSearch = () => {
  searchQuery.value = ''
}

// onMounted(() => {
//   activeSection.value = route.query.section || manualSections.value[0]?.id || 'reading-guide'
// })
</script>

<style scoped>
.manual-page {
  display: flex;
  min-height: 100vh;
  background: #f8f9fa;
}

.sidebar {
  width: 300px;
  background: #fff;
  border-right: 1px solid #e9ecef;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 100;
  overflow-y: auto;
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid #e9ecef;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.manual-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.collapse-btn {
  background: none;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
  margin-left: 10px;
}

.search-section {
  padding: 16px;
  border-bottom: 1px solid #e9ecef;
}

.navigation-menu {
  flex: 1;
  overflow-y: auto;
}

.nav-list {
  padding: 0 16px;
}

.nav-item {
  margin-bottom: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.nav-item:hover {
  background: #f8f9fa;
}

.nav-item.active {
  background: #e3f2fd;
  color: #1976d2;
}

.nav-item-content {
  display: flex;
  align-items: center;
  padding: 12px;
}

.nav-icon {
  margin-right: 12px;
  font-size: 16px;
  color: #6c757d;
}

.nav-item.active .nav-icon {
  color: #1976d2;
}

.nav-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.nav-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
  line-height: 1.4;
  color: #333;
}

.nav-time {
  font-size: 12px;
  color: #6c757d;
  line-height: 1.2;
}

.nav-item.active .nav-title {
  color: #1976d2;
}

.main-content {
  flex: 1;
  margin-left: 300px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content-header {
  background: #fff;
  padding: 16px 24px;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
}

.breadcrumb {
  flex: 1;
  margin: 0 16px;
}

.content-body {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

.section-content {
  background: #fff;
  border-radius: 8px;
  padding: 32px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 移动端菜单按钮 */
.mobile-menu-btn {
  display: none;
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1000;
  background: #667eea;
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.mobile-menu-btn:hover {
  background: #5a6fd8;
}

/* 遮罩层 */
.mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: none;
}

@media (max-width: 768px) {
  .mobile-menu-btn {
    display: flex;
  }
  
  .mobile-overlay {
    display: block;
  }
  
  .sidebar {
    width: 280px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1001;
  }
  
  .sidebar.sidebar-open {
    transform: translateX(0);
  }
  
  .main-content {
    margin-left: 0;
  }
}
</style>